<?php
/**
 * Template Name: Groups Homepage template
 * Description: This is the page the appears when clicking on the Groups main navigation tab.
 * Consists of a top section with a list of all Groups the signed in user is a member of, and 
 * a bottom section with the form to fill out in order to search for a "City" Group
 *
 * @ Twyne
 */

get_header();?>

		<div id="primary">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>
		<script src="<?php bloginfo('stylesheet_directory'); ?>/javascript/cityselect.js"></script>
			<div id="content" role="main">
			<img src="<?php bloginfo('stylesheet_directory'); ?>/city-back.png" style="display: none;" /> 	
				<header class="entry-header">
					<h3 class="entry-title">My Groups</h3>
				</header><!-- .entry-header -->
					
				<?php locate_template( array( 'groups/my-groups-loop.php' ), true ); ?>
				
				<div id="groups-home-pag-top"></div><!--Adds a separator to the next section-->
				
				<header class="entry-header">
					<h3 class="entry-title">Find a city to connect with</h3>
				</header><!-- .entry-header -->
				<form name="frmMain">
				<p>Please select a State and then a City:</p>
					<div id="choose_state">
						Select a state: <select name="states" onChange="populate_Cities()">
							<option selected="selected">Choose a state</option>
								<?php
                                echo "\n";
                                $states=$GLOBALS[wpdb]->get_col(
                                            "
                                                SELECT distinct description 
                                                FROM wp_bp_groups 
                                                WHERE status='public'
												ORDER BY description
                                            ");                        
                                    foreach ($states as $value) {
                                        echo "<option value=$value>$value</option>\n";
                                    };
                                ?>
							
						</select>
					</div><!--choose_state -->
					
				</form>
				<button type="button" onClick="go_city()">Submit</button>
				<script>
				function go_city(){
					var citiesList = document.frmMain.cities;
					var cityValue = citiesList[citiesList.selectedIndex].value;
					if(cityValue!="bad"){
						window.location="<?php bloginfo('url');?>/groups/"+cityValue;
					}
				}
				</script>
				
				<div id="groups-home-pag-top"></div><!--Adds a separator to the next section-->
				
				<header class="entry-header">
					<h3 class="entry-title">Create your own Group for your organization</h3>
				</header><!-- .entry-header -->
				<p><p>Private Twyne Groups are designed for any types of organizations. Their main purpose is to join all members of an organization together where everyone can network about any topic.</p>
				<p>These Groups are also geared towards helping members find roommates and housing if moving to a brand new city.</p>
				<p>Click below in order to create your own private Group.</p>
				<?php if ( is_user_logged_in() && bp_user_can_create_groups() ) : ?> 
						&nbsp;<a id="create-group-button" class="button" href="<?php echo trailingslashit( bp_get_root_domain() . '/' . bp_get_groups_root_slug() . '/create' ); ?>"><?php _e( 'Create An Organization Group', 'buddypress' ); ?></a>
				<?php endif; ?>
			
			
			</div><!-- #content -->
		</div><!-- #primary -->

<?php 
	get_sidebar('groups');
	get_footer(); ?>